HC: focus outline more prominent

- make visible regardless of colors used
- make larger and more inset

https://bugzilla.gnome.org/show_bug.cgi?id=767310

diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index dd5201c3fc19105c8ea9f6598919975ed7918d7e..7cedff14afb234cb1df646d6c86780abdcc4c79d 100644 (file)
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -28,10 +28,10 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   // to the adwaita engine: using real CSS properties is faster,
   // and we don't use any outlines for now.
 
-  outline-color: transparentize($fg_color, 0.7);
+  outline-color: currentColor;
   outline-style: dashed;
-  outline-offset: -3px;
-  outline-width: 1px;
+  outline-offset: -4px;
+  outline-width: 2px;
   -gtk-outline-radius: 2px;
 
 }
@@ -147,7 +147,6 @@ label {
   border: none;
   background-color: $osd_bg_color;
   background-clip: padding-box;
-  outline-color: transparentize($osd_fg_color, 0.7);
   //text-shadow: 0 1px black;
   //-gtk-icon-shadow: 0 1px black;
 
@@ -480,7 +479,6 @@ button {
 
     color: $osd_fg_color;
     border-radius: 5px;
-    outline-color: transparentize($osd_fg_color, 0.7);  //FIXME: define a color var?
 
     @include button(osd);
 
@@ -2234,7 +2232,6 @@ treeview.view radio {
     border-color: $osd_borders_color;
     background-color: transparentize($osd_borders_color, 0.2);
     box-shadow: none;
-    outline-color: transparentize($osd_fg_color, 0.8);
 
     &:disabled { background-color: $insensitive_bg_color; }
   }
@@ -2568,7 +2565,6 @@ levelbar {
 %selected_items {
   background-color: $selected_bg_color;
   color: $selected_fg_color;
-  outline-color: transparentize($selected_fg_color, 0.7);
   &:backdrop { background-color: $borders_color; color: $selected_fg_color; }
 }
 
@@ -3188,14 +3184,12 @@ colorswatch {
   // indicator and keynav outline colors, color-dark is a color with luminosity lower then 50%
   &.dark {
     color: white;
-    outline-color: transparentize(black, 0.7);
     border: 1px solid transparentize(black, 0.7);
     &:hover { border-color: transparentize(black, 0.5); }
     &:backdrop { color: transparentize(white, 0.7); }
   }
   &.light {
     color: black;
-    outline-color: transparentize(white, 0.5);
     border: 1px solid transparentize(black, 0.7);
     &:hover { border-color: transparentize(black, 0.5); }
     &:backdrop { color: transparentize(black, 0.7); }
@@ -3314,7 +3308,6 @@ cursor-handle {
   border: none;
   background-color: opacify($osd_bg_color,0.2);
   background-clip: padding-box;
-  outline-color: transparentize($osd_fg_color, 0.7);
   box-shadow: none;
   text-shadow: 0 1px black;
   -gtk-icon-shadow: 0 1px black;

diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css
index 9be5a90fb475eb9eaedcc07c3dc973ddfda25df3..21d03ec39d03f473761645e665b5654101907884 100644 (file)
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -41,10 +41,10 @@
   -GtkTreeView-horizontal-separator: 4;
   -GtkDialog-button-spacing: 4;
   -GtkDialog-action-area-border: 0;
-  outline-color: rgba(255, 255, 255, 0.3);
+  outline-color: currentColor;
   outline-style: dashed;
   outline-offset: -3px;
-  outline-width: 1px;
+  outline-width: 2px;
   -gtk-outline-radius: 2px; }
 
 /***************
@@ -112,8 +112,7 @@ popover.background.touch-selection, popover.background.magnifier, .csd popover.b
   color: #fff;
   border: none;
   background-color: rgba(0, 0, 0, 0.8);
-  background-clip: padding-box;
-  outline-color: rgba(255, 255, 255, 0.3); }
+  background-clip: padding-box; }
   popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop {
     text-shadow: none;
     -gtk-icon-shadow: none; }
@@ -492,7 +491,6 @@ row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(di
 button.osd {
   color: #fff;
   border-radius: 5px;
-  outline-color: rgba(255, 255, 255, 0.3);
   border-width: 2px;
   border-style: solid;
   color: #fff;
@@ -2309,8 +2307,7 @@ scale trough, scale fill {
   .osd scale trough, scale .osd trough, .osd scale fill, scale .osd fill {
     border-color: rgba(255, 255, 255, 0.2);
     background-color: rgba(255, 255, 255, 0);
-    box-shadow: none;
-    outline-color: rgba(255, 255, 255, 0.2); }
+    box-shadow: none; }
     .osd scale trough:disabled, scale .osd trough:disabled, .osd scale fill:disabled, scale .osd fill:disabled {
       background-color: #070707; }
 
@@ -2598,8 +2595,7 @@ entry selection, modelbutton.flat:selected, popover.background checkbutton:selec
 popover.background radiobutton:selected,
 .menuitem.button.flat:selected, treeview.view:selected, row.activatable:selected, .sidebar:selected {
   background-color: #ddd;
-  color: #000;
-  outline-color: rgba(0, 0, 0, 0.3); }
+  color: #000; }
   .view:backdrop:selected, textview text:backdrop:selected, iconview:backdrop:selected, calendar:backdrop:selected, textview text:backdrop:selected:focus, iconview:backdrop:selected:focus, calendar:backdrop:focus:selected, textview text:backdrop:selected:hover, iconview:backdrop:selected:hover, calendar:backdrop:hover:selected, textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label selection:backdrop, spinbutton:not(.vertical) selection:backdrop,
   entry selection:backdrop, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected,
   popover.background radiobutton:backdrop:selected,
@@ -3094,7 +3090,7 @@ placessidebar row {
   placessidebar row.sidebar-placeholder-row {
     padding: 0 8px;
     min-height: 2px;
-    background-image: linear-gradient(to bottom, #fff);
+    background-image: linear-gradient(to bottom, #fff, #fff);
     background-clip: content-box; }
   placessidebar row.sidebar-new-bookmark-row {
     color: #ddd; }
@@ -3294,7 +3290,6 @@ colorswatch {
     box-shadow: none; }
   colorswatch.dark {
     color: white;
-    outline-color: rgba(0, 0, 0, 0.3);
     border: 1px solid rgba(0, 0, 0, 0.3); }
     colorswatch.dark:hover {
       border-color: rgba(0, 0, 0, 0.5); }
@@ -3302,7 +3297,6 @@ colorswatch {
       color: rgba(255, 255, 255, 0.3); }
   colorswatch.light {
     color: black;
-    outline-color: rgba(255, 255, 255, 0.5);
     border: 1px solid rgba(0, 0, 0, 0.3); }
     colorswatch.light:hover {
       border-color: rgba(0, 0, 0, 0.5); }
@@ -3408,7 +3402,6 @@ cursor-handle {
   border: none;
   background-color: black;
   background-clip: padding-box;
-  outline-color: rgba(255, 255, 255, 0.3);
   box-shadow: none;
   text-shadow: 0 1px black;
   -gtk-icon-shadow: 0 1px black; }

diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index 59df69cb4421512410bdf37bd6489e342df3ef29..11c57cb5464069716dfb192a34d408301507bfc9 100644 (file)
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -41,10 +41,10 @@
   -GtkTreeView-horizontal-separator: 4;
   -GtkDialog-button-spacing: 4;
   -GtkDialog-action-area-border: 0;
-  outline-color: rgba(0, 0, 0, 0.3);
+  outline-color: currentColor;
   outline-style: dashed;
   outline-offset: -3px;
-  outline-width: 1px;
+  outline-width: 2px;
   -gtk-outline-radius: 2px; }
 
 /***************
@@ -112,8 +112,7 @@ popover.background.touch-selection, popover.background.magnifier, .csd popover.b
   color: #fff;
   border: none;
   background-color: rgba(0, 0, 0, 0.8);
-  background-clip: padding-box;
-  outline-color: rgba(255, 255, 255, 0.3); }
+  background-clip: padding-box; }
   popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop {
     text-shadow: none;
     -gtk-icon-shadow: none; }
@@ -494,7 +493,6 @@ row:selected button {
 button.osd {
   color: #fff;
   border-radius: 5px;
-  outline-color: rgba(255, 255, 255, 0.3);
   border-width: 2px;
   border-style: solid;
   color: #fff;
@@ -2316,8 +2314,7 @@ scale trough, scale fill {
   .osd scale trough, scale .osd trough, .osd scale fill, scale .osd fill {
     border-color: rgba(255, 255, 255, 0.2);
     background-color: rgba(255, 255, 255, 0);
-    box-shadow: none;
-    outline-color: rgba(255, 255, 255, 0.2); }
+    box-shadow: none; }
     .osd scale trough:disabled, scale .osd trough:disabled, .osd scale fill:disabled, scale .osd fill:disabled {
       background-color: white; }
 
@@ -2605,8 +2602,7 @@ entry selection, modelbutton.flat:selected, popover.background checkbutton:selec
 popover.background radiobutton:selected,
 .menuitem.button.flat:selected, treeview.view:selected, row.activatable:selected, .sidebar:selected {
   background-color: #000;
-  color: #fff;
-  outline-color: rgba(255, 255, 255, 0.3); }
+  color: #fff; }
   .view:backdrop:selected, textview text:backdrop:selected, iconview:backdrop:selected, calendar:backdrop:selected, textview text:backdrop:selected:focus, iconview:backdrop:selected:focus, calendar:backdrop:focus:selected, textview text:backdrop:selected:hover, iconview:backdrop:selected:hover, calendar:backdrop:hover:selected, textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label selection:backdrop, spinbutton:not(.vertical) selection:backdrop,
   entry selection:backdrop, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected,
   popover.background radiobutton:backdrop:selected,
@@ -3101,7 +3097,7 @@ placessidebar row {
   placessidebar row.sidebar-placeholder-row {
     padding: 0 8px;
     min-height: 2px;
-    background-image: linear-gradient(to bottom, #000);
+    background-image: linear-gradient(to bottom, #000, #000);
     background-clip: content-box; }
   placessidebar row.sidebar-new-bookmark-row {
     color: #000; }
@@ -3301,7 +3297,6 @@ colorswatch {
     box-shadow: none; }
   colorswatch.dark {
     color: white;
-    outline-color: rgba(0, 0, 0, 0.3);
     border: 1px solid rgba(0, 0, 0, 0.3); }
     colorswatch.dark:hover {
       border-color: rgba(0, 0, 0, 0.5); }
@@ -3309,7 +3304,6 @@ colorswatch {
       color: rgba(255, 255, 255, 0.3); }
   colorswatch.light {
     color: black;
-    outline-color: rgba(255, 255, 255, 0.5);
     border: 1px solid rgba(0, 0, 0, 0.3); }
     colorswatch.light:hover {
       border-color: rgba(0, 0, 0, 0.5); }
@@ -3415,7 +3409,6 @@ cursor-handle {
   border: none;
   background-color: black;
   background-clip: padding-box;
-  outline-color: rgba(255, 255, 255, 0.3);
   box-shadow: none;
   text-shadow: 0 1px black;
   -gtk-icon-shadow: 0 1px black; }